import React, { Component } from 'react'
import { NavBar, Image  } from 'components'

export default class Logistics extends Component<any, any> {

    public state = {
        data: [
            {
                messageTime: '11:11',
                messageImg: require('../../../assets/myMessage_logistics.png'),
                messageTitle: '物流小助手',
                messageText: '您的订单正在配送途中，请您准备签收(配送员：杨耀辉，联系电话：15198066520)，感谢您的耐心等待'
            },
            {
                messageTime: '11:11',
                messageImg: require('../../../assets/myMessage_logistics.png'),
                messageTitle: '物流小助手',
                messageText: '您的订单正在配送途中，请您准备签收(配送员：杨耀辉，联系电话：15198066520)，感谢您的耐心等待'
            },
            {
                messageTime: '11:11',
                messageImg: require('../../../assets/myMessage_logistics.png'),
                messageTitle: '物流小助手',
                messageText: '您的订单正在配送途中，请您准备签收(配送员：杨耀辉，联系电话：15198066520)，感谢您的耐心等待'
            }
        ]
    }

    public render (): JSX.Element {
        const { data } = this.state
        return (
            <section className="logistics">
                <div className="logistics_placehoder">
                    <div className="logistics_top">
                        <NavBar 
                            title="交易物流"
                        />
                    </div>
                </div>
                {
                    data.map((item: any, index: number) => {
                        return (
                            <div className="logistics_content" key={index}>
                                <div className="logistics_content_card">
                                    <div className="logistics_content_card_timeWrap">
                                        <div className="logistics_content_card_time">{item.messageTime}</div>
                                    </div>
                                    <div className="logistics_content_card_container">
                                        <p className="logistics_content_card_container_title">
                                            {item.messageTitle}
                                        </p>
                                        <div>
                                            <div><Image src={item.messageImg} /></div>
                                            <p>{item.messageText}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }
            </section>
        )
    }
}